<template>
  <div class="list-table">
    <div class="area-header">
      <span class="area-header-title">{{ $t('人事报表') }}</span>
    </div>
    <el-form ref="queryForm" :model="queryParams" :inline="true">
      <el-form-item :label="$t('时间周期')" prop="timeDimension">
        <dictSelect
          v-model="timeDimension"
          :clearable="true"
          dictionary="time_dimension"
        />
      </el-form-item>
      <el-form-item v-if="timeDimension === 'MOON'" :label="$t('选择月')" prop="applyMOONTimes">
        <el-date-picker
          v-model="applyMOONTimes"
          type="monthrange"
          align="right"
          unlink-panels
          start-placeholder="开始月份"
          end-placeholder="结束月份"
          :picker-options="pickerOptions"
        />
      </el-form-item>
      <el-form-item v-if="timeDimension === 'YEAR'" :label="$t('选择年')" prop="applyYEARTimes">
        <el-date-picker
          v-model="applyYEARTimes"
          type="year"
          placeholder="选择年"
          format="yyyy 年"
          style="width: 200px"
        />
      </el-form-item>
      <el-form-item v-if="timeDimension === 'WEEK'" :label="$t('选择周')" prop="applyWEEKTimes">
        <el-date-picker
          v-model="applyWEEKTimes"
          type="week"
          format="yyyy 第 WW 周"
          placeholder="选择周"
          style="width: 200px"
        />
      </el-form-item>
      <el-form-item :label="$t('部门')" prop="deptIds">
        <DeptSelect v-model="queryParams.deptIds" style="width: 300px" class="treeselect-main" filterable multiple :placeholder="$t('请选择')" />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="el-icon-search" size="mini" @click="queryHandle">{{ $t('搜索') }}</el-button>
        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">{{ $t('重置') }}</el-button>
      </el-form-item>
    </el-form>

    <el-row :gutter="10" class="mb8" />

    <el-table v-loading="loading" :data="hrReportList" border show-summary>
      <el-table-column :label="$t('序号')" type="index" align="center" show-overflow-tooltip width="50">
        <template slot-scope="scope">
          {{ (queryParams.pageNum - 1) * queryParams.pageSize + scope.$index + 1 }}
        </template>
      </el-table-column>
      <el-table-column :label="$t('部门')" align="center" prop="deptName" />
      <el-table-column :label="$t('初期人数')" align="center" prop="periodEarlyCount">
        <template slot-scope="scope">
          <el-link type="primary" @click="findHrSituation(scope.row,'periodEarly')">
            {{ scope.row.periodEarlyCount }}
          </el-link>
        </template>
      </el-table-column>
      <el-table-column :label="$t('末期人数')" align="center" prop="periodEndCount">
        <template slot-scope="scope">
          <el-link type="primary" @click="findHrSituation(scope.row,'periodEnd')">
            {{ scope.row.periodEndCount }}
          </el-link>
        </template>
      </el-table-column>
      <el-table-column :label="$t('入职人数')" align="center" prop="entryCount">
        <template slot-scope="scope">
          <el-link type="primary" @click="findHrSituation(scope.row,'entry')">
            {{ scope.row.entryCount }}
          </el-link>
        </template>
      </el-table-column>
      <el-table-column :label="$t('离职人数')" align="center" prop="resignCount">
        <template slot-scope="scope">
          <el-link type="primary" @click="findHrSituation(scope.row,'resign')">
            {{ scope.row.resignCount }}
          </el-link>
        </template>
      </el-table-column>
    </el-table>

    <pagination
      v-show="total>0"
      :total="total"
      :page.sync="queryParams.pageNum"
      :limit.sync="queryParams.pageSize"
      @pagination="getList"
    />

    <el-dialog
      :title="$t('人员情况')"
      :visible.sync="situationOpen"
      :close-on-click-modal="false"
      :lock-scroll="false"
      custom-class="dialogForm"
      append-to-body
      width="50%"
    >
      <hrReportSituation ref="hrReportSituation" />
    </el-dialog>

  </div>
</template>

<script>
import { listHrBase } from '@/api/oa/hr/hrBaseReport'
import hrReportSituation from './hrBaseReportSituationList.vue'
import moment from 'moment'

export default {
  components: { hrReportSituation },
  data() {
    return {
      // 遮罩层
      loading: true,
      // 总条数
      total: 0,
      // 人事报表表格数据
      hrReportList: [],
      // 时间维度
      timeDimension: 'MOON',
      // 弹出层标题
      title: '',
      situationOpen: false,
      applyWEEKTimes: undefined,
      applyMOONTimes: [
      ],
      applyYEARTimes: undefined,
      deptIds: [],
      // 是否显示弹出层
      formOpen: false,
      // 查询参数
      queryParams: {
        timeDimension: undefined,
        status: undefined,
        deptIds: [],
        pageNum: 1,
        pageSize: 10,
        startDate: undefined,
        endDate: undefined
      },
      // 表单参数
      form: {},
      // 时间维度为月时可选的日期格式
      pickerOptions: {
        shortcuts: [{
          text: '本月',
          onClick(picker) {
            picker.$emit('pick', [new Date(), new Date()])
          }
        }, {
          text: '今年至今',
          onClick(picker) {
            const end = new Date()
            const start = new Date(new Date().getFullYear(), 0)
            picker.$emit('pick', [start, end])
          }
        }, {
          text: '最近六个月',
          onClick(picker) {
            const end = new Date()
            const start = new Date()
            start.setMonth(start.getMonth() - 6)
            picker.$emit('pick', [start, end])
          }
        }]
      }
    }
  },
  created() {
    this.applyMOONTimes[0] = new Date().setMonth(new Date().getMonth() - 6)
    this.applyMOONTimes[1] = new Date()
    this.getList()
  },
  methods: {
    /** 查询人事报表列表 */
    getList() {
      this.loading = true
      // 时间参数赋值
      if (this.timeDimension === 'YEAR') {
        if (this.applyYEARTimes !== null && this.applyYEARTimes !== '') {
          this.queryParams.startDate = moment(this.applyYEARTimes).startOf('year').format('YYYY-MM-DD')
          this.queryParams.endDate = moment(this.applyYEARTimes).endOf('year').format('YYYY-MM-DD')
        } else {
          this.queryParams.startDate = ''
          this.queryParams.endDate = ''
        }
      }
      if (this.timeDimension === 'MOON') {
        if (this.applyMOONTimes !== [] && this.applyMOONTimes.length > 0) {
          this.queryParams.startDate = moment(this.applyMOONTimes[0]).startOf('month').format('YYYY-MM-DD')
          this.queryParams.endDate = moment(this.applyMOONTimes[1]).endOf('month').format('YYYY-MM-DD')
        } else {
          this.queryParams.startDate = ''
          this.queryParams.endDate = ''
        }
      }
      if (this.timeDimension === 'WEEK') {
        if (this.applyWEEKTimes !== null && this.applyWEEKTimes.length !== '') {
          this.queryParams.startDate = moment(this.applyWEEKTimes).startOf('week').format('YYYY-MM-DD')
          this.queryParams.endDate = moment(this.applyWEEKTimes).endOf('week').format('YYYY-MM-DD')
        } else {
          this.queryParams.startDate = undefined
          this.queryParams.endDate = undefined
        }
      }
      listHrBase(this.queryParams).then(response => {
        this.hrReportList = response.rows
        this.total = response.total
        this.loading = false
        this.queryParams.startDate = undefined
        this.queryParams.endDate = undefined
      })
    },
    // 表单重置
    reset() {
      this.form = {
        id: undefined,
        createBy: undefined,
        createTime: undefined,
        updateBy: undefined,
        updateTime: undefined,
        delFlag: undefined,
        deptId: undefined,
        entryTime: undefined
      }
      this.applyYEARTimes = undefined
      this.applyMOONTimes = []
      this.applyWEEKTimes = undefined

      this.resetForm('form')
    },
    // 搜索按钮操作
    queryHandle() {
      this.queryParams.pageNum = 1
      this.getList()
    },
    // 重置按钮操作
    resetQuery() {
      this.resetForm('queryForm')
      this.applyMOONTimes = []
      this.applyYEARTimes = undefined
      this.applyWEEKTimes = undefined
    },
    findHrSituation(row, hrType) {
      this.situationOpen = true
      this.$nextTick(() => {
        this.$refs.hrReportSituation.findHandle(row, hrType)
      })
    }
  }
}
</script>
